<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

	<style type="text/css">
	div.pq-grid tr td.disabled{    
	    text-shadow: 0 1px 0 #fff;
	    background:#ddd;
	}
	tr td.beige{        
	    background:beige;
	}
	</style>
<script>
    $(function () {
        function disableTextRenderer(ui) {
            var grid = $(this).pqGrid('getInstance').grid,
                rowData = ui.rowData,
                rowIndx = ui.rowIndx,
                dataIndx = ui.dataIndx;

            if (grid.isEditableCell({ rowIndx: rowIndx, dataIndx: dataIndx }) == false) {
                //inject disabled class into read only cells.                
                grid.addClass({ rowIndx: rowIndx, dataIndx: dataIndx, cls: 'disabled' });
            }
            else {
                grid.removeClass({ rowIndx: rowIndx, dataIndx: dataIndx, cls: 'disabled' });
            }
        };
        var colModel = [
            { title: "Country", width: "120", dataIndx: "Country", cls: 'beige' },
            { title: "Customer ID", dataIndx: "customerid", width: 120 },
            { title: "Company Name", width: 180, dataIndx: "companyname",
                editable: function (ui) {
                    var countries = ['SPAIN', 'UK', 'USA'],
                        country = ui.rowData['Country'].toUpperCase();
                    //make cell read only if country in this row is present in countries list.    
                    if ($.inArray(country, countries) !== -1) {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                render: disableTextRenderer
            },            
            { title: "Contact Name", width: 140, dataIndx: "contactname",
                editable: function (ui) {
                    var countries = ['GERMANY', 'BRAZIL'],
                        country = ui.rowData['Country'].toUpperCase();
                    //make cell read only if country in this row is present in countries list.    
                    if ($.inArray(country, countries) !== -1) {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                render: disableTextRenderer
            },
            { title: "Contact Title", width: 140, dataIndx: "contacttitle" },
		    { title: "Address", width: "170", dataIndx: "address" }
		];
        var dataModel = {
            recIndx: "customerid",
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "contactname",
            sortDir: "up",
            url: "/pro/customers/get",
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        }
        var newObj = {
            width: 'auto',
            dataModel: dataModel,
            showTitle: false,
            showBottom: false,
            colModel: colModel,
            selectionModel: { all: true },
            copyModel: { header: true },
            editable: true,
            cellSave: function (evt, ui) {
                //refresh the row to update the read only cells.                
                $(this).pqGrid('refreshRow', {rowIndx: ui.rowIndx});
            },
            scrollModel: { autoFit: true },
            title: "Contact Details"
        };
        $("#grid_readonly").pqGrid(newObj);
    });
        
</script>    
</head>
<body>

<div id="grid_readonly" style="margin: auto;">
    </div>

</body>

</html>
